<template>
  <div class="yxp-course">
    <TopBack :title="title" :courseId="toNumber(courseId)" :id="toNumber(id)" :type="'1'"/>
    <div class="yxp-composition-main">
      <div class="composition-list">
        <div class="composition-list-item" v-for="item in dataList" :key="item.id" @click="handleDetail(item)">
          <div class="composition-list-item-box">
            <img src="@/assets/composition/time-icon.png" class="time-icon"/>
            <div class="list-item-r">
                <h3>{{item.title}}</h3>
                <p>{{item.updatedAt}}</p>
            </div>
          </div>
        </div>
      </div>
      <Empty v-if="isNone" />
    </div>
  </div>
</template>
<script>
import Empty from '@/views/components/empty.vue'
import TopBack from '@/views/components/TopBack.vue'
import {userRecorList} from "@/api/reverse";
import {toNumber} from "lodash/lang";
export default {
  name: 'list',
  components: {
    Empty,
    TopBack
  },
  data () {
    return {
      title: '训练记录',
      id: '',
      courseId: 0,
      dataList: [],
      isNone: false
    }
  },
  mounted() {
     window.onresize = () => {
     };
  },
  created () {
    if (this.$route.query.userId) {
      this.id = +this.$route.query.userId
      this.courseId = +this.$route.query.courseId
    }
    this.handleData()
  },
  methods: {
    toNumber,
    async handleData () {
      let params ={
        userId:this.id,
        courseId: this.courseId
      }
      await userRecorList(params).then((res)=>{
        this.dataList = res.data
        console.log(this.dataList)
      })
      // this.$loading.show()
      // let data = await reportList({ curr_id: this.id })
      // if (data.code === 1) {
      //   this.$loading.hide()
      //   if (data.data.list.length === 0) {
      //     this.isNone = true
      //     return
      //   }
      //   this.dataList = data.data.list
      // } else {
      //   this.$loading.hide()
      //   this.$message.error(data.info)
      // }
    },
    handleDetail (item) {
     this.$router.push({
       path: '/composition/uploadResult',
       query: {
         userId: this.id,
         courseId: item.courseId,
         packageId: item.packageId,
         num: item.num,
       }
     })
    }
  }
}
</script>
<style scoped>
.yxp-course{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.yxp-composition-main {
  //padding-top: 30px;
  width: 100%;
  height: calc(100% - 80px);
  border-radius: 0px 0px 20px 20px;
  background: #F0F2F4;
  .composition-box {
    justify-content: center;
  }
  .composition-list-item:hover {
    box-shadow:0px 0px 10px rgba(39,191,163,0.5);
  }
  .composition-list::-webkit-scrollbar {
    display: none;
  }

  .composition-list {
    display: flex;
    //justify-content: space-between;
    width: 750px;
    margin: 0px auto;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;

   .composition-list-item {
      background: #fff;
      border-radius: 10px;
      margin-top: 20px;
      padding: 30px 40px 28px;
      cursor: pointer;
      transition: box-shadow .3s;

      .composition-list-item-box {
        display: flex;
        align-items: center;
        text-align: left;
        .time-icon {
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
        .list-item-r {
          flex: 1;
          h3 {
            font-size:24px;
            font-weight:400;
            color: #333;
          }
          p {
            font-size:16px;
            font-weight:400;
            color: #333;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>